function $(id) {
  return document.getElementById(id);
}

function setStatus(current) {
  const pictures = $("pictures").children;
  for (const picture of pictures) {
    picture.className = "";
  }
  pictures[current].className = "current";

  const subs = $("subs").children;
  for (const sub of subs) {
    sub.className = "";
  }
  subs[current].className = "current";
}

window.onload = function () {
  let current = 0;
  setStatus(current);

  const length = $("pictures").children.length;
  $("left_btn").onclick = function () {
    current--;
    if (current < 0) {
      current = length - 1;
    }
    setStatus(current);
  };
  $("right_btn").onclick = function () {
    current++;
    current %= length;
    setStatus(current);
  };

  const subs = $("subs").children;
  for (let i = 0; i < length; i++) {
    subs[i].onclick = function () {
      current = i;
      setStatus(i);
    }
  }

  setInterval(() => {
    current++;
    current %= length;
    setStatus(current);
  }, 3e3);
};
